<template>
  <div class="YuesaoDetails">
    <!-- 月嫂详情 -->
    <!-- 通知栏 -->
    <noticeBar></noticeBar>
    <van-nav-bar
      class="page-nav-bar"
      left-text="家政平台"
      left-arrow
      @click-left="$router.back()"
    >
      <template #right>
        <rightTopBtn></rightTopBtn>
      </template>
    </van-nav-bar>
    <!-- 名片卡片 -->
    <Card class="Card_one">
      <template #Card>
        <div class="staffInfo">
          <span> <van-image :src="yuesaoInfo.headPortrait"/></span>
          <span class="staffInfo_middle"
            ><div class="name">{{ yuesaoInfo.name }}</div>
            <div class="star">{{ yuesaoInfo.grade }}</div>
            <div class="info">
              {{ yuesaoInfo.address }} | {{ yuesaoInfo.age }}岁 |
              {{ yuesaoInfo.experience }}年经验
            </div></span
          >
          <span
            ><van-button @click="gzBtn" :class="{followcolor:follow}" round type="info" class="follow_btn"
              >{{follow?"取关":"关注"}}</van-button
            ></span
          >
        </div>
        <div class="registered_company">
          注册公司：{{yuesaoInfo.registeredCompany}}
        </div>
        <div class="occupation">
          职业：<span v-for="item in yuesaoInfo.occupation" :key="item">
            {{ item }}
          </span>
        </div>
        <div class="verify">
          <span
            class="toutiao toutiao-renzhengdunpaianquanbaozhangzhibao"
          ></span
          >{{ yuesaoInfo.authentication ? '身份信息已核实' : '身份信息未核实' }}
        </div>
        <div class="contact">
          <div>
            <van-button
              plain
              round
              type="info"
              size="mini"
              class="contact_btn"
              color="#4a51b7"
              >电话联</van-button
            >
          </div>
          <div>
            <van-button
              plain
              round
              type="info"
              size="mini"
              class="contact_btn"
              color="#4a51b7"
              >微信联</van-button
            >
          </div>
        </div>
      </template>
    </Card>
    <!-- 详情卡片 -->
    <Card class="details_card">
      <template #Card>
        <!-- 标签 -->
        <div>
          <labels :text="'主要技能'"></labels>
        </div>
        <!-- /标签 -->
        <!-- 技能标签栏 -->
        <ul class="label_ul clearfix">
          <li class="label_son" v-for="item in skill" :key="item">
            {{ item }}
          </li>
        </ul>
        <!-- /技能标签栏 -->

        <!-- 标签 -->
        <labels :text="'个人简介'"></labels>
        <!-- /标签 -->
        <!-- 主要技能内容 -->
        <p class="text">
          {{ yuesaoInfo.personalProfile }}
        </p>
        <!-- /主要技能内容 -->
        <!-- 标签 -->
        <labels :text="'个人简介'"></labels>
        <!-- /标签 -->
        <ul class="info_text">
          <li
            class="text"
            v-for="(item, index) in yuesaoInfo.labelIntroduction"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
        <!-- 标签 -->
        <labels class="certificates_info" :text="'证件信息'"></labels>
        <!-- /标签 -->
        <!-- 图片 -->
        <van-image
          fit="contain"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image
          fit="contain"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-image fit="contain" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        <!-- /图片 -->
        <!-- 标签 -->
        <labels class="certificates_info" :text="'证件信息'"></labels>
        <!-- /标签 -->
        <!-- 图片 -->
        <van-image
          fit="contain"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        /><van-image
          fit="contain"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        /><van-image fit="contain" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
        <!-- /图片 -->
      </template>
    </Card>
    <!-- /详情卡片 -->
    <!-- 底部标签栏 -->
    <Tabbar></Tabbar>
    <!-- /底部标签栏 -->
  <van-popup v-model="plShow" @click="plShow=true" position="bottom" :style="{ height: '30%' }" >
   <van-cell title="单元格" value="内容" label="描述信息" />
  </van-popup>
  <van-popup v-model="fxShow" position="bottom" :style="{ height: '30%' }" >
   <van-cell title="单元格" value="内容" label="描述信息" />
  </van-popup>
  <van-popup v-model="wxShow" position="bottom" :style="{ height: '30%' }" >
   <van-cell title="单元格" value="内容" label="描述信息" />
  </van-popup>
  <van-popup v-model="dhShow" position="bottom" :style="{ height: '30%' }" >
   <van-cell title="单元格" value="内容" label="描述信息" />
  </van-popup>
  </div>
</template>

<script>
import rightTopBtn from '@/components/rightTopBtn'
import Card from './components/Card.vue'
import Tabbar from './components/Tabbar.vue'
import labels from './components/labels.vue'
import { getDetails } from '@/api/module/YuesaoDetails'
import noticeBar from '@/components/noticeBar'
export default {
  data () {
    return {
      yuesaoInfo: [],
      skill: [],
      follow: false,
      plShow: false,
      fxShow: false,
      wxShow: false,
      dhShow: false
    }
  },
  created () {
    this.getDetails()
  },
  methods: {
    async getDetails () {
      const { data } = await getDetails()
      this.yuesaoInfo = data[0]
      this.skill = data[1].skill
    },
    gzBtn () {
      if (this.follow) {
        this.$toast.success('取消关注成功')
      } else {
        this.$toast.success('关注成功')
      }
      this.follow = !this.follow
    }
  },
  components: {
    rightTopBtn,
    Card,
    Tabbar,
    labels,
    noticeBar
  }
}
</script>

<style scoped lang="less">
.YuesaoDetails {
  background-color: #f8f8f5;
  width: 100%;
  padding-bottom: 80px;
  /deep/.van-nav-bar__content {
    height: 2.22667rem;
  }

  /deep/.page-nav-bar {
    background-color: #3f51b5;
    .van-nav-bar__text {
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
    .van-nav-bar__text {
      font-size: 32px;
    }
  }
  .Card_one {
    position: absolute;
    top: 100px;
    z-index: 2;
    .registered_company {
      font-size: 24px;
      color: rgba(151, 145, 145, 100);
      margin-top: 42px;
    }
    .occupation {
      font-size: 24px;
      color: rgba(151, 145, 145, 100);
      margin-top: 14px;
    }
    .verify {
      color: rgba(0, 0, 0, 1);
      font-size: 28px;
      margin: 52px 76px;
      .toutiao {
        font-size: 36px;
        color: #3f51b5;
        padding-right: 12px;
        padding-top: 4px;
      }
    }
    .contact {
      position: absolute;
      right: 26px;
      bottom: 22px;
      padding-bottom: 22px;
      .contact_btn {
        width: 124px;
        height: 50px;
      }
    }
    .staffInfo {
      display: flex;
      justify-content: center;
      align-items: center;
      .van-image {
        width: 154px;
        height: 144px;
        position: absolute;
        top: 26px;
        left: 28px;
      }
      /deep/.staffInfo_middle {
        position: relative;
        padding-left: 10px;
        .name {
          font-size: 28px;
          margin-bottom: 12px;
          color: rgba(16, 16, 16, 100);
        }
        .star {
          box-sizing: border-box;
          width: 178px;
          height: 46px;
          border: 2px solid #3f51b5;
          color: rgba(63, 81, 181, 100);
          border-radius: 23px;
          font-size: 20px;
          line-height: 46px;
          text-align: center;
        }
        .info {
          margin-top: 18px;
          font-size: 24px;
          color: rgba(151, 145, 145, 100);
        }
      }
      .follow_btn {
        width: 124px;
        height: 50px;
        background-color: rgba(63, 81, 181, 100);
        position: absolute;
        top: 24px;
        right: 26px;
      }
    }
  }
  .details_card {
    margin-top: 440px;
    padding: 32px 26px;
    .label_ul {
      padding: 18px 30px;
      .label_son {
        float: left;
        border: 2px solid #3f51b5;
        margin: 10px 20px;
        height: 46px;
        line-height: 46px;
        font-size: 20px;
        padding: 0 10px;
        border-radius: 46px;
      }
    }

    .text {
      font-size: 24px;
      color: rgba(123, 119, 119, 100);
      padding: 5px 30px;
    }
    .info_text {
      margin-top: 14px;
    }
    .certificates_info {
      margin: 20px;
    }
    .van-image {
      width: 200px;
      height: 148px;
      padding: 0 6px;
    }
  }
  .clearfix:before,
  .clearfix:after {
    content: '';
    display: table;
  }
  .clearfix:after {
    clear: both;
  }
  /* ie6 7 专门清除浮动的样式*/
  .clearfix {
    *zoom: 1;
  }
}
.followcolor{
  box-sizing: border-box;
  background-color: rgb(170, 170, 170) !important;
  border: 2px rgb(170, 170, 170) solid;
}
</style>
